<template>
    <div class="skill f f-ac f-jc">
        <div class="skill-body">
            <Sub-title label="学才艺" padding="40px 0 10px" />
            <Type-btn :list="typeList" :current="current" key-value="id" top="30" row-gap="21" @click="handleType" />
            <div class="f f-ac f-ja">
                <div class="site-item" v-for="(i, k) in dataList" :key="k" @mouseover="i.hover = true"
                    @mouseleave="i.hover = false" @click="handleDetail(i)" :class="{
            'site-show': i.hover,
            minWidth: isAvg,
          }">
                    <img :src="baseUrl+i.image" />
                    <div class="site-info">
                        <div class="title line-1" :title="i.titile || '-'">
                            {{ i.titile || "-" }}
                        </div>
                        <div class="address mt-10 mb-10 line-1" :title="`地点：${i.address || '-'}`">
                            地点：{{ i.address || "-" }}
                        </div>
                        <div class="sign line-1" :title="`报名人数：${i.registered || 0}/${i.limit || 0}人`">
                            {{ `报名人数：${i.registered || 0}/${i.limit || 0}人` }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        learnList,
        learnCategory
    } from "@/utils/learning/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                current: "", //当前选中
                typeList: [],
                dataList: [],
            };
        },
        created() {
            this.getTypeList();
            this.getList();
        },
        computed: {
            isAvg() {
                return this.dataList.some((i) => i.hover);
            },
        },
        mounted() {},

        methods: {
            // 获取才艺列表
            getList() {
                this.loading = true;
                let that = this
                let data = {
                    train_category_id: that.current,
                    title: '',
                    type: '',
                    page: 1,
                    limit: 4,
                    starttime: '',
                    type_time: '',
                    endtime: '',
                    application: '',
                    recommend: 2
                }
                learnList(data).then((response) => {
                    if (response.code == 200) {
                        that.dataList = response.data.list.map(item => {
                            return {
                                ...item,
                                hover: false
                            }
                        })
                        that.loading = false;
                        console.log(that.dataList,'that.dataList')
                    }

                });
            },
            // 获取才艺分类
            getTypeList() {
                let that = this
                learnCategory().then((response) => {
                    response.data.unshift({
                        id: "",
                        name: "全部",
                    });
                    that.typeList = response.data
                });
            },
            // 点击按钮
            handleType(i) {
                this.current = i.id;
                this.getList()
            },
            // 查看详情
            handleDetail(i) {
                this.$router.push({
                    path: "/skill/details",
                    query: {
                        id: i.id,
                    },
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .skill {
        width: 100%;
        height: 610px;
        /* background-color: #f5f5f5; */

        &-body {
            width: 1200px;
            height: 100%;

            .site-item {
                height: 402px;
                margin-right: 14px;
                transition: all 0.5s;
                flex: 1;

                &:hover {
                    cursor: pointer;
                }

                &:last-child {
                    margin-right: 0;
                }

                img {
                    width: 100%;
                    height: 294px;
                    border-radius: 5px;
                    margin-bottom: 10px;
                    transition: all 0.5s;
                    transition-delay: 0.1s;
                    object-fit: cover;
                }

                .site-info {
                    max-width: 250px;
                    background-color: #fff;
                    border-radius: 5px;
                    transition: all 0.5s;
                    padding: 8px 20px;

                    div {
                        transition: all 0.5s;
                    }

                    .title {
                        color: #313131;
                        font-size: 16px;
                        font-weight: 600;
                    }

                    .address {
                        color: #909090;
                        font-size: 14px;
                    }

                    .sign {
                        color: #193980;
                        font-size: 14px;
                    }
                }
            }

            .minWidth {
                .site-info {
                    div {
                        width: 151px;
                    }
                }
            }

            .site-show {
                flex: 3;

                img {
                    height: 344px;
                    border-radius: 0;
                    margin-bottom: 0;
                }

                .site-info {
                    max-width: 580px;
                    border-radius: 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    transition: all 0.5s;

                    .address {
                        width: 42%;
                    }
                }
            }
        }
    }
</style>